<template>
	<view class="redemption-container">
		<view class="header">
			<text class="title">兑换记录</text>
		</view>

		<!-- 兑换列表 -->
		<view class="redemption-list">
			<view class="redemption-item" v-for="(item, index) in redemptionList" :key="index">
				<view class="item-header">
					<text class="user-name">{{ item.userName }}</text>
					<view class="status-badge" :class="item.status">
						<text class="status-text">{{ getStatusText(item.status) }}</text>
					</view>
				</view>



				<view class="item-content">
					<view class="info-row">
						<text class="label">兑换礼品：</text>
						<text class="value">{{ item.item_name }}</text>
					</view>

					<view class="info-row">
						<text class="label">手机号码：</text>
						<text class="value">{{ item.phone }}</text>
					</view>


					<view class="info-row">
						<text class="label">消耗积分：</text>
						<text class="value points">{{ item.cost_jackpoint }}分</text>
					</view>

					<view class="info-row">
						<text class="label">申请时间：</text>
						<text class="value">{{ renderFormatDateTime(item.applyTime) }}</text>
					</view>

					<view class="info-row" v-if="item.completeTime">
						<text class="label">完成时间：</text>
						<text class="value">{{ renderFormatDateTime(item.completeTime) }}</text>
					</view>

					<view class="info-row">
						<text class="label">领取日期：</text>
						<text class="value">{{ item.date }}</text>
					</view>

					<view class="info-row">
						<text class="label">领取时间段：</text>
						<text class="value">{{ getOptionText(item.option) }}</text>
					</view>

				</view>


				<!-- 管理员操作按钮 -->
				<view class="admin-actions" v-if="usertype && item.status === 'pending'">
					<button class="confirm-btn" @click="confirmRedemption(item)">确认兑换</button>
				</view>

			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="redemptionList.length === 0 && !loading">
			<image class="empty-icon" src="/static/no-data.png" mode="aspectFit"></image>
			<text class="empty-text">暂无兑换记录</text>
		</view>

		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
import {
	request,
	formatDateTime
} from "../../js/util.js";
export default {
	data() {
		return {
			redemptionList: [],
			loading: false,
			usertype: false,
			userName: "",
			user_id: ""
		}
	},
	onLoad(option) {
		const userInfo = uni.getStorageSync('userInfo');
		console.log('userInfo', userInfo)
		if (userInfo.role == 'admin') {
			this.usertype = true
			this.userName = uni.getStorageSync("userName")
			console.log("this.userName", this.userName, this.usertype)
			this.user_id = option.id
		} else {
			this.user_id = uni.getStorageSync('userid')
		}
		this.loadRedemptionList()
	},
	methods: {
		async loadRedemptionList() {
			this.loading = true;
			try {
				let submitData = {
					condition: {
						// status: "pending",
						user_id: this.user_id
					}

				}
				let data = await request("selectRedemption", submitData);
				console.log("selectRedemption", submitData, data);
				this.redemptionList = data.result || [];
			} catch (error) {
				console.error("加载兑换记录失败:", error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},

		renderFormatDateTime(timestamp) {
			return formatDateTime(timestamp)
		},

		getStatusText(status) {
			const statusMap = {
				'pending': '待处理',
				'completed': '已完成',
				'cancelled': '已取消'
			};
			return statusMap[status] || '未知';
		},

		getOptionText(option) {
			const optionMap = {
				'option1': '上午（8:30-12:00）地点：下滘村委会',
				'option2': '下午（14:30-17:30）地点：下滘读书驿站'
			};
			return optionMap[option] || '未知时间段';
		},

		confirmRedemption(item) {
			uni.showModal({
				title: '确认兑换',
				content: `确认处理 ${item.name} 的兑换申请吗？`,
				success: (res) => {
					if (res.confirm) {
						this.handleConfirmRedemption(item);
					}
				}
			});
		},

		async handleConfirmRedemption(item) {
			uni.showLoading({
				title: '处理中...'
			});

			try {
				let submitData = {
					redemption_id: item._id,
					user_id: this.user_id
				}
				const data = await request("confirmRedemption", submitData);
				console.log("confirmRedemption", submitData, data);

				if (data.status) {
					uni.showToast({
						title: '兑换确认成功',
						icon: 'success'
					});
					// 刷新列表
					this.loadRedemptionList();
				} else {
					uni.showToast({
						title: data.result.message || '确认失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error("确认兑换失败:", error);
				uni.showToast({
					title: '网络错误',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		}
	}
}
</script>

<style scoped>
.redemption-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.header {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.redemption-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.redemption-item {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.user-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.status-badge {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.status-badge.pending {
	background-color: #fff3cd;
	color: #856404;
}

.status-badge.completed {
	background-color: #d4edda;
	color: #155724;
}

.status-badge.cancelled {
	background-color: #f8d7da;
	color: #721c24;
}

.status-text {
	font-size: 24rpx;
}

.item-content {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.info-row {
	display: flex;
	align-items: center;
}
.info-row-bottom {
	display: flex;
	align-items: flex-start;
}

.label {
	font-size: 28rpx;
	color: #666;
	min-width: 140rpx;
}

.value {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.value.points {
	color: #ff6b35;
	font-weight: bold;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

/* 管理员操作样式 */
.admin-actions {
	margin: 20rpx 0;
	padding: 20rpx 0;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: flex-end;
}

.confirm-btn {
	background: linear-gradient(135deg, #28a745, #20c997);
	color: #fff;
	font-size: 26rpx;
	padding: 12rpx 24rpx;
	border-radius: 20rpx;
	border: none;
	min-width: 120rpx;
}

.confirm-btn:active {
	opacity: 0.8;
}
</style>